昨天import的要素我們還剩下一個沒有介紹到，那就是今天的主題BroserRouter。

BroserRouter

BroserRouter是包在整個使用到Router範圍的最外層，讓router能夠運作。BroserRouter是大家最常使用的方法。

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

HashRouter

跟BroserRouter很類似，最大的不同是他產生出的URL會多一個#符號，URL中的#符號一般是在錨點上會看到，但在React Router裡面#符號代表的是儲存與目前url相關的訊息，對於URL來說#後的訊息並不是真的URL的一部分，實際的URL依舊是http://localhost:3000。

最常使用到的情況是在share server(例如:GitHub Pages)上，我們不能改變URL時就可以用hash的方式去切換，在不改變實際URL的情況下，僅改變#後面的內容。

//BroserRouter
http://localhost:3000/contact
//HashRouter
http://localhost:3000/#/contact